<!--
 * @Description:
 * @version:
 * @Author: 娃哈哈
 * @Date: 2024-12-18 21:09:43
-->
<template>
    <div class="box">
        <bgBox>
            <sectionTitle title="物业三色排名(上月)" />
            <div class="content">
                <div class="thead">
                    <div class="th">星级</div>
                    <div class="th">名称</div>
                    <div class="th">服务标准</div>
                </div>
                <ScrollTable :height="160" :dataSource="dataSource" :columns="columns" :showColumns="false"
                    :scroll="true" @cellClick="cellClick">
                </ScrollTable>
            </div>
        </bgBox>
    </div>
</template>

<script setup lang="ts">
import bgBox from '../components/bgBox.vue'
import sectionTitle from '../components/sectionTitle.vue'
import ScrollTable from '../components/scrollTable.vue'
import { reactive, ref, inject } from 'vue';
import { PopupType } from '../../index.d'

const dataSource = ref([
    {
        name: '3星',
        age: '景峰小区',
        gender: '三级',
    },
    {
        name: '3星',
        age: '阅海万家',
        gender: '三级',
    },
    {
        name: '3星',
        age: '景峰小区',
        gender: '三级',
    },
    {
        name: '3星',
        age: '阅海万家',
        gender: '二级',
    },
    {
        name: '3星',
        age: '阅海万家',
        gender: '二级',
    },
    {
        name: '3星',
        age: '阅海万家',
        gender: '二级',
    },
    {
        name: '3星',
        age: '阅海万家',
        gender: '二级',
    },
    {
        name: '2星',
        age: '阅海万家',
        gender: '一级',
    },
    {
        name: '2星',
        age: '阅海万家',
        gender: '一级',
    },
    {
        name: '2星',
        age: '阅海万家',
        gender: '一级',
    },
    {
        name: '2星',
        age: '阅海万家',
        gender: '一级',
    },
    {
        name: '2星',
        age: '阅海万家',
        gender: '一级',
    },
    {
        name: '2星',
        age: '阅海万家',
        gender: '一级',
    },
    {
        name: '1星',
        age: '阅海万家',
        gender: '三级',
    },
    {
        name: '1星',
        age: '阅海万家',
        gender: '三级',
    },
    {
        name: '1星',
        age: '阅海万家',
        gender: '四级',
    },
])

const columns = ref([
    {
        title: '星级',
        dataIndex: 'name',
        width: '30%',
        key: 'name',
    },
    {
        title: '名称',
        dataIndex: 'age',
        width: '40%',
        key: 'age',
    },
    {
        title: '服务标准',
        dataIndex: 'gender',
        width: '30%',
        key: 'gender',
    },
])
/**
 * 列比点击事件
 */
const showPopup = inject('showPopup') as (data: PopupType) => void;
const cellClick = (data: Record<string, any>) => {
    console.log(data, '滚动表格拿到的数据');
    showPopup({ type: 7, show: true })
    showPopup({ type: 4, show: true })
    showPopup({ type: 1, show: true,popupFlag: 'table' })
    showPopup({ type: 5, show: true, popupFlag: 'info' })
}
</script>

<style scoped lang="less">
.box {
    height: 220px;
}

.content {
    height: 200px;
    padding: 10px 12px 0 25px;
}

.thead {
    display: flex;
    justify-content: space-around;
    height: 32px;
    line-height: 32px;
    background: url('@/assets/img/tabTitle.png') no-repeat 50%;
    background-size: 100% 100%;
    text-align: center;

    .th {
        &:first-child {
            width: 30%;
        }

        &:nth-child(2) {
            width: 40%;
        }

        &:last-child {
            width: 30%;
        }
    }
}

.el-dialog__wrapper {
    pointer-events: none;

    :deep( .el-dialog) {
        pointer-events: auto;
    }
}

.message-dialog {

    .el-dialog__header,
    .el-dialog__body,
    .el-dialog__footer {
        pointer-events: auto !important;
    }
}

:has(> .el-overlay-dialog .message-dialog) {
    pointer-events: none !important;
}
</style>